<template>
    <div class="common-layout">
    <el-container>
      <el-header>
        <el-form :inline="true"  class="demo-form-inline">
                    <el-form-item>
                        <el-button type="primary" @click="Position=true">+添加系列</el-button>
                    </el-form-item>            
        </el-form>
        <el-dialog v-model="Position" title="添加类型" width="40%" align-center>
            <el-form :inline="true"  v-model="input" class="demo-form-inline"  :on-change="changeIamge">
                <el-form-item label="系列名称" prop="name">
                <el-input v-model="input.name" placeholder="系列名" @change='typeCheck' />
                                </el-form-item>
                <!-- <span>商品类型：</span>
                <el-input v-model="input.name" placeholder="请输入类型" @change='typeCheck' /> -->
        </el-form>
            <el-button type="primary" @click="tj" :disabled="a">添加</el-button>     
        </el-dialog>
      </el-header>
      <el-main>
        <el-table :data="list" style="width: 100%; text-align: start;" empty-text="暂无数据"
                        :header-cell-style="{ background: '#EFF0FD', color: '#606266' }" id="table">
                        <el-table-column fixed prop="id" label="ID"   show-overflow-tooltip/>
                        <el-table-column prop="name" label="商品类型"   show-overflow-tooltip />
                        <el-table-column fixed="right" label="操作"   show-overflow-tooltip>
                            <template #default="a">
                                <el-button link type="primary" size="small" @click="del(a.row)">
                                    删除
                                </el-button>

                                
                            </template>
                        </el-table-column>
                        
                       
                    
                    </el-table>

      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
    name: 'TypeList',

    data() {
        return {
            list:[],
            Position:false,
            input:{name:''},
            a:true,
           
        };
    },

    mounted() {
        this.cx();
    },

    methods: {
        
        typeCheck (v) {
    try {
        this.list.forEach(item => {
            if (item.name == v){
                this.a=true;
                throw new Error("type-check-error");
        
    }
            else{
            this.a=false;
        }            
        })
        return true
    } catch (e) {
        if (e.message == "type-check-error") {
            this.$message({
                message:'该系列已存在',
                type: 'warning'
            })
            return false
        }
        
    }
},

        del(a){
            var url='http://localhost:8083/CollectionServlet/del';
            this.$http.post(url,a)
            .then((res)=>{
                this.cx();  
            })

        },
        tj(){
            // this.Position=ture;
            var url='http://localhost:8083/CollectionServlet/addtype';
            this.$http.post(url,this.input)
            .then((res)=>{
                this.cx();  
            })

            
            this.input='';
            this.Position=false;
           
        },
        cx(){
            var url='http://localhost:8083/CollectionServlet/queryAllType';
            this.$http.post(url)
            .then((res)=>{
                this.list=res.data;
            })
        }
    },
};
</script>

<style lang="scss" scoped>

</style>